html, body{

  	font-family: 'Lato', sans-serif;

        font-size: 100%;

  	background: #fff;

}

body a{

	transition:0.5s all;

	-webkit-transition:0.5s all;

	-moz-transition:0.5s all;

	-o-transition:0.5s all;

	-ms-transition:0.5s all;

}

/*----start-container----*/

.container{

        font-family: "微软雅黑";

	width:70%;

}

/*-----start-header----*/

.header{

    border-bottom: 1px solid #FC7A49;

    background: #F5F5F5;

}



.logo{

	float: left;

	margin-top: 0.6em;

}

.logo a{

	color: #303030;

	font-size: 2.5em;

}

.logo a:hover{

	text-decoration:none;

}

.logo320{

	display:none;

}

/*----navbar-nav----*/

.top-header{

	padding: 0.8em 0em;

}

.top-nav ul li a{

	color: #A7A7A7;

	padding: 0.2em 1.5em;

	font-size: 1.2em;

	font-weight: 400;

	text-align: center;

	text-transform: uppercase;

	position: relative;

	font-weight: 300;

}

.top-nav ul li.active a,

.top-nav ul li a:hover{

	color:#282528;

}

.logo a{

	display:block;

}

/* top-nav */

.top-nav:before,

.top-nav:after {

    content: " ";

    display: table;

}

.top-nav:after {

    clear: both;

}

nav {

	position: relative;

	float: right;

}

nav ul {

	padding: 0;

	float: right;

	margin: 0.9em 0;

}

nav li {

	display: inline;

	float: left;

	position:relative;

}

nav a {

	color: #fff;

	display: inline-block;

	text-align: center;

	text-decoration: none;

	line-height: 40px;

}

nav a:hover{

	text-decoration:none;

	color:#00A2C1;

}

nav a#pull {

	display: none;

}

/*Styles for screen 600px and lower*/

@media screen and (max-width: 768px) {

	nav { 

  		height: auto;

  		float:none;

  	}

  	nav ul {

  		width: 100%;

  		display: block;

  		height: auto;

  	}

  	nav li {

  		width: 100%;

  		position: relative;

  	}

  	nav li a {

		border-bottom: 1px solid #eee;

	}

  	nav a {

	  	text-align: left;

	  	width: 100%;

  	}

}

/*Styles for screen 515px and lower*/

@media only screen and (max-width : 768px) {

	nav {

		border-bottom: 0;

		float:none;

	}

	nav ul {

		display: none;

		height: auto;

		margin:0;

		background: #fff;

	}

	nav a#pull {

		display: block;

		position: relative;

		color: #F26D7D;

		text-align: right;

		position: absolute;

		top:12px;

	}

	nav a#pull:after {

		content:"";

		background: url('nav-icon.png') no-repeat;

		width: 30px;

		height: 30px;

		display: inline-block;

		position: absolute;

		right: 15px;

		top: 10px;

	}

	nav a#pull img{

		margin-right:2%;

	}

	.top-nav ul li a {

		color: #2C3E50;

		padding: 0em 0;

	}

}

/*Smartphone*/

@media only screen and (max-width : 320px) {

	nav {

		float:none;

	}

	nav li {

		display: block;

		float: none;

		width: 100%;

	}

	nav li a {

		border-bottom: 1px solid #EEE;

	}

        #chart{display:none;}

}

/*---- banner ----*/

.banner{

	background:#F6F5F4 url(../images/slide1.jpg) no-repeat center;

	min-height:580px;

}

.banner-info h1{

	font-size: 2.5em;

	text-transform: uppercase;

	color: #303030;

	font-weight: 800;

	line-height: 1.4em;

	margin: 0em;

}

.banner-info h1 span{

	display:block;

}

.banner-info p{

	color: #7B7C7B;

	font-family: 'Playball', cursive;

	font-size: 1.3em;

}

.big-btn{

	margin-top:1.0em;

	display:inline-block;

}

a.big-btn span{

	width:80px;

	height:80px;

	display:inline-block;

	background:url(../images/big-btn.png) no-repeat 0px 0px;

}

a.big-btn span:hover{

	opacity:0.8;

}

.banner-info{

	margin-top: 13.5em;

}

/*---- //banner ----*/

/*----works----*/

.work{

	padding:2em 0;

        /*background: #f0f0f0;*/

}

.head-one{

	padding:0em 0 2em;

}

.head-one h2{

	color:#303030;

	font-weight:800;

	font-size:1.8em;

	text-transform:uppercase;

	margin:0.2em 0;

}

.head-one span{

	height:3px;

	background:#303030;

	display:inline-block;

	width:20%;

	margin:0;

	padding:0;

}

.head-one p{

	margin: 0.4em auto;

	font-size: 1em;

	color: #5A5A5A;

	letter-spacing: 0.015em;

	width: 61%;

	line-height: 1.5em;

}

.work-grid img{

	width:100%;

}

.work-grid{

	margin-bottom:30px;

}

/*---team---*/

.team{

	background: #F3F3F3;

	padding: 2em 0 4em;

	border: 1px solid #DBDBDB;

	border-right: 0;

	border-left: 0;

}

.team-head p{

	width: 59%;

	font-weight: 600;

	color: #5A5A5A;

	margin: 1.2em auto;

}

.team-member{

	background:#FFFFFF;

	padding:1em;

	box-shadow: 0px 1px 2px #999;

	-webkit-box-shadow: 0px 1px 2px #999;

	-moz-box-shadow: 0px 1px 2px #999;

	-o-box-shadow: 0px 1px 2px #999;

	-ms-box-shadow: 0px 1px 2px #999;

}

img.t-pic{

	border-radius: 30em;

	-webkit-border-radius: 30em;

	-moz-border-radius: 30em;

	-o-border-radius: 30em;

	-ms-border-radius: 30em;

	border: 3px solid #FFF;

	box-shadow: 0px 5px 4px #999;

	-webkit-box-shadow: 0px 5px 4px #999;

	-moz-box-shadow: 0px 5px 4px #999;

	-o-box-shadow: 0px 5px 4px #999;

	-ms-box-shadow: 0px 5px 4px #999;

}

.team-member h3{

	text-transform: uppercase;

	font-weight: 800;

	font-size: 1em;

	margin: 1em 0 0.3em;

	color:#303030;

}

.team-member span{

	font-style:italic;

	color:#303030;

}

/*---*/

.t-social{

	margin:1em 0 0.5em;

}

.t-social li a span{

	width:20px;

	height:20px;

	display:inline-block;

	background:url(../images/t-social.png) no-repeat 0px 0px;

}

.t-social li a.twitter span:hover{

	background-position: 0px -25px;

}

.t-social li a.dribbble span{

	background-position: -35px 0px;

}

.t-social li a.dribbble span:hover{

	background-position: -35px -25px;

}

.t-social li a.in span{

	background-position: -72px 0px;

}

.t-social li a.in span:hover{

	background-position: -72px -25px;

}

/*----contact----*/

.contact{

	padding: 2em 0 6em;

}

.contact-map{

	

}

.contact-map p,.contact-form p{

	font-size: 1.2em;

	color: #5A5A5A;

	margin: 0.5em 0 1em;

	font-weight: 400;

	display: block;

}

.contact-map iframe{

	width:100%;

	min-height:350px;

	border:8px solid #FFF;

	box-shadow:0px 0px 2px #999;

	-webkit-box-shadow:0px 0px 2px #999;

	-moz-box-shadow:0px 0px 2px #999;

	-o-box-shadow:0px 0px 2px #999;

	-ms-box-shadow:0px 0px 2px #999;

}

.contact-form textarea{

	width: 100%;

	min-height: 254px;

	resize: none;

	outline: none;

	background: #F2F2F2;

	padding: 0.8em;

	font-family: 'Playball', cursive;

	font-size: 1.3em;

	color: #666;

	border: 1px solid #DADADA;

	transition: border-color 0.3s;

	-o-transition: border-color 0.3s;

	-ms-transition: border-color 0.3s;

	-moz-transition: border-color 0.3s;

	-webkit-transition: border-color 0.3s;

}

.contact-form input[type="text"]{

	width: 65%;

	background: #F2F2F2;

	padding: 0.8em;

	font-family: 'Playball', cursive;

	font-size: 1.3em;

	color: #666;

	border: 1px solid #DADADA;

	outline:none;

	margin-right:5%;

	margin-top:5%;

	transition: border-color 0.3s;

	-o-transition: border-color 0.3s;

	-ms-transition: border-color 0.3s;

	-moz-transition: border-color 0.3s;

	-webkit-transition: border-color 0.3s;

}

.contact-form input[type="text"]:hover,.contact-form textarea:hover{

	border-color:#6995A9;

}

.contact-form input[type="submit"]{

	background: url(../images/upload.png) no-repeat 28px 17px #6995A9;

	color: #FFF;

	text-transform: uppercase;

	font-weight: 700;

	padding: 0.93em 1em;

	border: none;

	width: 30%;

	text-indent: 19px;

	transition: 0.5s all;

	-webkit-transition: 0.5s all;

	-moz-transition: 0.5s all;

	-o-transition: 0.5s all;

	-ms-transition: 0.5s all;

	font-size: 1.2em;

	letter-spacing: 0.05em;

}

.contact-form input[type="submit"]:hover{

	background: url(../images/upload.png) no-repeat 28px 17px #303030;

}

/*--//contact----*/

/*----footer----*/

.footer{

	background:#4F4F4F;

	padding:1.5em 1em;

}

.footer p{

	margin:0;

	padding:0;

	color:#868686;

	font-size:1em;

}

.footer-left{

	float:left;

}

.footer-right{

	float:right;

}

.footer p span,.footer p a{

	color:#949494;

}

.footer p a:hover{

	text-decoration:none;

	color:#6995A9;

}

#toTop {

	display: none;

	text-decoration: none;

	position: fixed;

	bottom: 14px;

	right: 3%;

	overflow: hidden;

	width: 40px;

	height: 40px;

	border: none;

	text-indent: 100%;

	background: url("../images/to-top1.png") no-repeat 0px 0px;

}

#toTopHover {

	width: 40px;

	height: 40px;

	display: block;

	overflow: hidden;

	float: right;

	opacity: 0;

	-moz-opacity: 0;

	filter: alpha(opacity=0);

}

/*----respoisnive-design----*/

@media (max-width:1366px){

	.container{

		width:75%;

	}

}

@media (max-width:1280px){

	.container{

		width:80%;

	}

	.banner {

		min-height: 560px;

	}

	.banner-info {

		margin-top: 12.5em;

	}

}

@media (max-width:1024px){

	.container{

		width:80%;

	}

	.banner {

		min-height: 560px;

	}

	.banner-info {

		margin-top: 12.5em;

	}

	.contact-map p, .contact-form p {

		font-size: 1.1em;

	}

}

@media (max-width:768px){

	.container{

		width:80%;

	}

	.banner {

		min-height: 480px;

	}

	.banner-info {

		margin-top: 9.5em;

	}

	.contact-map p, .contact-form p {

		font-size: 1.1em;

	}

	.head-one p {

		width: 90%;

	}

	.logo {

		margin-top: 0.1em;

	}

	nav a#pull {

		top: 10px;

	}

	.team-member{

		margin:1em 0;

	}

	.team {

		padding: 2em 0 3em;

	}

	.head-one {

		padding: 0em 0 0.5em;

	}

	.footer-left,.footer-right{

		float: none;

	}

	.footer{

		text-align:center;

	}

}

@media (max-width:640px){

	.container{

		width:80%;

	}

	.banner {

		min-height: 450px;
		background: none;

	}

	.banner-info {

		margin-top: 6.5em;

	}

	.contact-map p, .contact-form p {

		font-size: 1.1em;

	}

	.head-one p {

		width: 90%;

	}

	.logo {

		margin-top: 0.1em;

	}

	nav a#pull {

		top: 10px;

	}

	.team-member{

		margin:1em 0;

	}

	.team {

		padding: 2em 0 3em;

	}

	.head-one {

		padding: 0em 0 0.5em;

	}

	.footer-left,.footer-right{

		float: none;

	}

	.footer{

		text-align:center;

	}

	.contact-form input[type="submit"] {

		background: url(../images/upload.png) no-repeat 16px 17px #6995A9;

	}

	.contact-form input[type="submit"]:hover {

		background: url(../images/upload.png) no-repeat 16px 17px #303030;

	}

}

@media (max-width:480px){

	.container{

		width:100%;

	}

	.banner {

		min-height: 380px;

	}

	.banner-info {

		margin-top: 4.5em;

	}

	.contact-map p, .contact-form p {

		font-size: 1.1em;

	}

	.head-one p {

		width: 90%;

	}

	.logo {

		margin-top: 0.1em;

	}

	nav a#pull {

		top: 10px;

	}

	.team-member{

		margin:1em 0;

	}

	.team {

		padding: 2em 0 3em;

	}

	.head-one {

		padding: 0em 0 0.5em;

	}

	.footer-left,.footer-right{

		float: none;

	}

	.footer{

		text-align:center;

	}

	.contact-form input[type="submit"] {

		background: url(../images/upload.png) no-repeat 101px 17px #6995A9;

		width:100%;

	}

	.contact-form input[type="submit"]:hover {

		background: url(../images/upload.png) no-repeat 101px 17px #303030;

	}

	.banner-info h1 {

		font-size: 2em;

	}

	.contact-form input[type="text"] {

		width: 100%;

		margin-bottom:1em;

	}



}

@media (max-width:320px){

	.container{

		width:90%;

	}

	.banner {

		min-height:280px;

	}

	.banner-info {

		margin-top: 2.5em;

	}

	.contact-map p, .contact-form p {

		font-size: 1.1em;

	}

	.head-one p {

		width: 90%;

	}

	.logo {

		margin-top: 0.1em;

	}

	nav a#pull {

		top: 9px;

	}

	.team-member{

		margin:1em 0;

	}

	.team {

		padding: 1.5em 0;

	}

	.head-one {

		padding: 0em 0 0.5em;

	}

	.footer-left,.footer-right{

		float: none;

	}

	.footer{

		text-align:center;

	}

	.contact-form input[type="submit"] {

		background: url(../images/upload.png) no-repeat 58px 8px #6995A9;

		width:100%;

		padding: 0.5em;

	}

	.contact-form input[type="submit"]:hover {

		background: url(../images/upload.png) no-repeat 58px 8px #303030;

	}

	.banner-info h1 {

		font-size: 1.5em;

	}

	.contact-form input[type="text"] {

		width: 100%;

		margin-bottom:1em;

		padding: 0.5em;

	}

	.banner-info p {

		font-size: 1em;

	}

	.big-btn {

		margin-top: 1em;

	}

	.head-one h2 {

		font-size: 1.2em;

	}

	.work {

		padding: 1.5em 0;

	}

	.contact-map iframe {

		min-height: 217px;

	}

	.contact-form textarea {

		min-height: 206px;

		padding: 0.5em;

	}

	.contact {

		padding: 1.5em 0 3em;

	}

	.head-one span {

		width: 40%;

	}

	

}

.service{padding-top:2em;}

.service p{text-align: left;width:100%;color: #111;padding: 4px;border-radius: 4px;}

.service ul {

    list-style: none;

    text-align: left;

    line-height:180%;

    padding: 0;

}

.service ul li{

    margig-bottom: 2px;

    width: 100%;

}

.hover-grid-item img{height:190px;}

#whatever img {background:#F3F3F3;padding: 4px;} 
#service2 .liucheng{
	background:url(../images/liucheng.png) no-repeat center center;
	width:100%;
	height: 200px;
}